<!DOCTYPE html>
<html lang="en">
  <? include("../common/common.php"); ?>  
	
  <body>	    
    <? include("../common/menu.php"); ?>
    <div class="container">	  
      <div class="page-header">
    	<h1>Auto complete <small> - You can add / update / auto complete definitions using this page</small></h1>
      </div>	
      <div id = "alert_placeholder"></div>
      <div class="tabbable tabs-left"> <!-- Only required for left/right tabs -->
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Add Definitions</a></li> 
            <li><a href="#tab2" data-toggle="tab">Maintain Definitions</a></li>           	
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab1">
                <form class="form-horizontal">                    
                    <legend>New auto complete informations here</legend>
                    <div class="control-group">
                        <label class="control-label" for="autoCompleteName">Auto Complete Name:</label>
                        <div class="controls">
                        	<input type="text" id="autoCompleteName" placeholder="Auto complete name">&nbsp;
                                <input type="button" class="btn btn-success" value="Add"/>
                        </div>
                        <br>
                        <label class="control-label" for="data">Item:</label>
                        <div class="controls">
                        	<input type="text" id="data" placeholder="Item"/>
                        </div>
                        <br>                        
                        <label class="control-label" for="listOfItems">List of items:</label>
                        <div class="controls">
                            <select id="listOfItems" multiple="multiple" size="10">
                            	<option> -- Select One -- </option>
                                <option> Root Category </option>
                            </select> &nbsp;
                            <input type="button" class="btn btn-danger" value="Remove"/>
                        </div>
                        <br>                        
                        <div class="controls">
                        	<button type="button" class="btn btn-large btn-primary"  onClick="generateError('Invalid username and password')">Save</button> &nbsp;
                        	<button type="reset" class="btn btn-large btn-primary">Reset</button>
                        </div>
                     </div>
               </form>
            </div> 
            <div class="tab-pane" id="tab2">
            	<legend>Auto complete definitions maintainance page</legend>               
                <table class="table table-striped">
                	<thead>
                    	<th>Auto complete name</th>
                        <th>Number of items</th>
                        <th>Edit</th>
                        <th>Delete</th>
                    </thead>
                    <tbody>
                    	<tr>
                            <td>Authors</td>
                            <td>45</td>
                            <td><input type="button" class="btn btn-success" value="Edit"/></td>
                            <td><input type="button" class="btn btn-danger" value="Delete"/></td>
                         </tr>
                         <tr>
                            <td>Publications</td>
                            <td>50</td>
                            <td><input type="button" class="btn btn-success" value="Edit"/></td>
                            <td><input type="button" class="btn btn-danger" value="Delete"/></td>
                         </tr>
                    </tbody> 
                </table>
            </div>           
       </div>           
     </div>
  </body>
</html>
